<template>
  <chart :auto-resize="true" :options="options"></chart>
</template>

<script>
export default {
  data() {
    return {
      options: {
        title: {
          // text: "园区企业分布",
          // subtext: "企业状态",
          top: "10",
          subtextStyle: {
            color: " #48eaff",
            fontSize: 16,
            fontFamily: "YouSheBiaoTiHei",
          },
          // left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // 图例组件
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        // },
        series: [
          {
            name: "企业状态",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "60%"],
            label: {
              normal: {
                textStyle: {
                  color: "#48eaff", // 改变标示文字的颜色
                },
              },
            },
            data: [
              {
                value: 108,
                name: "消防报警",
                itemStyle: {
                  color: "#3d84ff",
                },
              },

              {
                value: 588,
                name: "视频报警",
                itemStyle: {
                  color: "#2b6ad6",
                },
              },
              {
                value: 156,
                name: "入侵报警",
                itemStyle: {
                  color: "#1c53b2",
                },
              },
              {
                value: 72,
                name: "应急报警",
                itemStyle: {
                  color: "#0e3d8f",
                },
              },
              {
                value: 276,
                name: "门禁报警",
                itemStyle: {
                  color: "#062c6f",
                },
              },
            ],
            clockwise: false,
            emphasis: {
              itemStyle: {
                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [20, 20, 0, 0],
                },
              },
            },
          },
        ],
      },
    };
  },
};
</script>
